<template>
  <div class="people">
     <my-header>
         <!-- 在vue3里面 v-slot 更接近指令的写法  v-slot 的简写形式 #-->
        <template #left>
           <van-icon name="arrow-left" />
        </template>
        <!-- <template #center="{i}">
           人气列表{{i}}
        </template> -->
        <template #center>
           人气列表
        </template>
     </my-header>
     <div class="count">
       <my-cart v-for="(item,index) in goodList" :key="index" :itemObj="item"></my-cart>
     </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { getGoods } from "@/api/home/index";
import myCart from '../../components/myCart.vue';
import MyHeader from '../../components/myHeader.vue';
export default {
  components: { myCart, MyHeader },
  setup() {
    const goodList = ref([]); // 商品的数据
    getGoods().then(res => {
        goodList.value = res.data;
    })
    return{
      goodList
    }
  },
};
</script>
<style lang="scss" scoped>
header{
  line-height: 50px;
  text-align: center;
}
.people{
  height: 100%;
}
.count{
  height: calc(100% - 50px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
}
</style>